<template>
	<view class="home-page">
		<!-- 搜索 -->
		<search-bar ref="searchRef" @cityChange="cityChange" />
		<!-- 轮播图 && 宫格 -->
		<swiper-grid ref="swiperRef" />
		<!-- 标题 -->
		<hor-bar />
		<!-- 车辆列表 -->
		<car-list :tableData="tableData" :status="status" @backInfo="backInfo" />
		<tabbar-bottom />
		<uv-modal ref="modal" title="暂无车辆信息" show-cancel-button confirm-color="#FF9113" @confirm="handConfirm"
			width="550rpx">
			<view style="line-height: 100rpx;">{{ tip }}</view>
		</uv-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		defineComponent,
		watch
	} from 'vue';
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		userList
	} from '@/hooks/userList.js'
	import {
		doProductList,
		doDetail
	} from '@/apis/car.js'
	import {
		doFindByCity
	} from '@/apis/user.js'

	import SearchBar from './components/SearchBar.vue'
	import SwiperGrid from './components/SwiperGrid.vue'
	import HorBar from './components/HorBar.vue'
	import CarList from '@/components/CarList.vue'
	import TabbarBottom from '@/components/tabbar/TabbarBottom.vue'

	const useStore = useAppsStore()
	let isFirst = true
	const {
		getCityName: cityName,
		getUserInfo: userInfo,
	} = storeToRefs(useStore)
	const {
		setPid,
		setCityname
	} = useStore

	const cityChange = () => {
		console.log('位置发生改变')
	}

	onLoad(async (e) => {e
		uni.hideTabBar()
		if (e.scene) {
			const scene = decodeURIComponent(e.scene)
			const arr = scene.split('=')
			if (arr.length >= 1) {
				const id = arr[1]
				console.log(id)
				setPid(id)
			}
		}
		if (e?.pid) {
			setPid(e.pid)
		}
		if (!cityName.value) {
			await getApp().getCity()
		}
		handFindCity()
		onRefresh()
	})

	const modal = ref()
	const tip = ref('')
	let defaultCity = ''
	const handConfirm = () => {
		setCityname(defaultCity)
	}
	const handFindCity = async () => {
		const data = await doFindByCity(cityName.value)
		if (data && data.city) {
			defaultCity = data.city
			tip.value = `是否要切换到${data.city}`
			modal.value.open()
		}
		console.log(data)
	}

	/**
	 * 
	 * 列表数据
	 * */

	const backInfo = async (e) => {
		const index = tableData.value.findIndex(el => el.id === e.id)
		const data = await doDetail(e.id)
		if (data.platform) {
			data.platform = JSON.parse(data.platform)
		} else {
			data.platform = []
		}
		tableData.value[index] = data
	}


	const getApi = async (params) => {
		params.city = cityName.value
		const res = await doProductList(params)
		res.records = res.records.map(el => {
			if (el.platform) {
				el.platform = JSON.parse(el.platform)
			} else {
				el.platform = []
			}
			return el
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {
			isShelves: true,
			isHome: true
		}
	})
	const searchRef = ref()
	const swiperRef = ref()
	onPullDownRefresh(() => {
		try {
			searchRef.value.init()
			swiperRef.value.getBanner()
		} catch (e) {
			//TODO handle the exception
		}
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})

	onShareAppMessage(() => {
		let path = `pages/tabbar/home/index`
		if (userInfo.value?.id) {
			path += `?pid=${userInfo.value.id}`
		}
		return {
			path
		}
	})

	onShareTimeline(() => {
		let query = ``
		if (userInfo.value?.id) {
			path += `pid=${userInfo.value.id}`
		}
		return {
			query
		}
	})

	watch(cityName, () => {
		onRefresh()
	})
</script>

<style lang="scss" scoped>
	.home-page {
		padding-bottom: 150rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
	}
</style>